<template>
    <div class="login">
      <img src="../../assets/images/login.jpg" alt="">
        <div class="loginin">
                <h2>Login Here</h2>
                <el-form :model="ruleForm"  :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="账号" prop="name">
                      <el-input placeholder="请输入内容" v-model="ruleForm.name" clearable></el-input>
                      <!-- <el-input type="password" v-model="ruleForm.pass" ></el-input> -->
                    </el-form-item>
                    <el-form-item label="密码" prop="passwords">
                      <el-input type="password" placeholder="请输入密码" v-model="ruleForm.passwords" show-password></el-input>
                    </el-form-item>
                    <el-form-item>
                      <el-button type="primary" @click="submitForm('ruleForm')"  @keyup.enter="submitForm('ruleForm')" class="submits">登录</el-button>
                    </el-form-item>
                </el-form>
        </div>
    </div>
</template>
<script>
export default {
  data () {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (this.ruleForm.checkPass !== '') {
          this.$refs.ruleForm.validateField('checkPass')
        }
        callback()
      }
    }
    return {
      ruleForm: {
        name: '',
        passwords: ''
      },
      rules: {
        name: [{ required: true, message: '请输入账号', trigger: 'blur' }],
        passwords: [{ required: true, validator: validatePass, message: '请输入密码', trigger: 'blur' }]
      }
    }
  },
  created () {
    console.log(this.ruleForm)
  },
  methods: {
    submitForm (ruleform) {
      // console.log(ruleform)
      var url = 'http://111.160.78.62:9930/Cityscapeapi/DataListCompany/GetLoginModelApi'
      this.$axios({
        url: url,
        method: 'post',
        data: {
          user: this.ruleForm.name,
          pwd: this.ruleForm.passwords
        }
      }).then((res) => {
        if (res.status === 200) {
          localStorage.setItem('islogin', 1)
          localStorage.setItem('codes', res.data.obj.CLIENT_NO)
          this.$router.push({
            path: '/map'
          })
          this.$message({ // 提示成功信息
            type: 'success',
            message: '登录成功'
          })
        } else {
          this.$message({ // 提示失败信息
            type: 'error',
            message: '用户名或密码错误!'
          })
        }
        console.log(res)
      }).catch((error) => {
        console.log(error)
      })
      // this.$router.push({
      //   path: 'map',
      //   query: {
      //     edittype: this.ruleForm
      //   }
      // })
    }
  }
}
</script>
<style scoped>
    .login{
        width: 100%;
        height: 100%;
    }
    .login img{
        width: 100%;
        height: 100%;
        position: relative;
    }
    .loginin h2{
        padding:0 0 15px 0;
        color: #26B4EA;
    }
    .loginin{
        width: 350px;
        height: auto;
        border: 1px solid #B9B9B9;
        border-radius: 5px;
        padding: 10px;
        box-sizing: border-box;
        box-shadow:  10px -10px 10px #888888;
        padding-right: 60px;
        position:absolute;
        top: 55%;
        left: 40%;
    }
    .submits{
        width: 100%;
    }
</style>
